<template>
  <view class="Invited column" style="justify-content: flex-start;">
    <image :src="userinfo.avatar" mode="" class="avatar"></image>
    <view style="color:#7B4A1D;">邀请人：{{userinfo.realname?userinfo.realname:userinfo.nickname}}</view>
    <view class="center code">
      <text></text>
      <image src="../../static/login/we.png" mode=""></image>
      <text>二维码已失效</text>
    </view>
    <view style="font-size: 24rpx;color: #7B4A1D;margin:15rpx 0px;">{{iangAll.use}}</view>
    <view class="text">{{iangAll.new}}</view>
    <view class="text">{{iangAll.zhitui}}</view>
    <view class="but" @click="navTo('invitation/invitation')">我也邀请</view>
  </view>
  <view class="package column" style="background-color: #496CE9;width: 674rpx;color:#fff;">
    <view>领取记录</view>
    <view class="swiper">
      <mosowe-swiper :lists="gifAll" :touchable="false" vertical swiperType="text" />
    </view>
  </view>
</template>

<script setup lang="ts">
  import { navTo } from '@/utils/navigator';
  import mosoweSwiper from '@c/mosowe-swiper/mosowe-swiper.vue';
  import { ref } from 'vue';
  import { showLoading } from '@/utils/prompt';
  import { getRandMobile, getJiang } from '@/gql/invitation';
  import { toPublish } from '@mqtt';
  import { onLoad } from '@dcloudio/uni-app';
  import { userInfo } from '@/gql/user';
  /**
   * 我的邀请
   * @property {Array} gifAll 领取记录
   * @property {String} fromDriverId 邀请人ID
   * @property {String} key 邀请的唯一值
   * @property {Object} userinfo 邀请人信息
   * @property {Object} iangAll 失效的邀请信息
   */
  const gifAll = ref([])
  const fromDriverId = ref('')
  const key = ref('')
  const userinfo = ref({})
  const iangAll = ref({})
  onLoad((pearm) => {
    fromDriverId.value = pearm.zhitui_id ? pearm.zhitui_id : 1
    key.value = pearm.key
    loses()
  })
  function loses() {
    showLoading()
    const payload = {
      query: getJiang,
      variables: { zhitui_id: Number(fromDriverId.value), key: key.value },
    };
    toPublish('ql/driver/getJiang', payload, (obj : any) => {
      const { data } = obj;
      iangAll.value = data.getJiang;
    });
  }
  function userInfor() {
    showLoading()
    const payload = {
      query: userInfo,
      variables: { driver_id: Number(fromDriverId.value) },
    };
    toPublish('ql/driver/getDriverInfo', payload, (obj : any) => {
      const { data } = obj;
      userinfo.value = data.driver_info;
    });
  }
  init()
  function init() {
    showLoading()
    const payload = {
      query: getRandMobile,
    };
    toPublish(
      'ql/driver/getRandMobile',
      payload,
      (obj : any) => {
        const { getRandMobile } = obj.data;
        gifAll.value = getRandMobile
        userInfor()
      }
    );
  }
</script>

<style scoped lang="less">
  .swiper {
    width: 100%;
    margin-top: 20rpx;
  }

  .Invited {
    margin: 0vh auto;
    width: 674rpx;
    height: 766rpx;
    background-image: url(https://admin.anlan.tech/uploads/20230712/f51f7d25504b4dd09901fdcb78c63a6c.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    .avatar {
      margin-top: 5rpx;
      width: 142rpx;
      height: 142rpx;
      border-radius: 50%;
      margin-bottom: 20rpx;
    }

    .code {
      position: relative;
      margin-top: 20rpx;
      justify-content: center;

      image {
        width: 207rpx;
        height: 207rpx;
      }

      text:nth-of-type(1) {
        width: 207rpx;
        height: 207rpx;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 6px;
        position: absolute;
        z-index: 2;
      }

      text:nth-of-type(2) {
        position: absolute;
        z-index: 3;
        color: #fff;
      }
    }
  }

  .text {
    padding: 5rpx 20rpx;
    box-sizing: border-box;
    border-radius: 30rpx;
    background-color: rgba(255, 73, 24, .1);
    color: #ff4918;
    font-size: 24rpx;
    margin-bottom: 15rpx;
  }

  .but {
    width: 348rpx;
    height: 86rpx;
    background: linear-gradient(180deg, #FF695E, #FF724E, #FF8F72);
    border-radius: 43rpx;
    text-align: center;
    line-height: 86rpx;
    font-size: 36rpx;
    color: #FFFFFF;
    margin-top: 10rpx;
  }
</style>
<style>
  page {
    background: linear-gradient(#4B6DEA, #4193F9);
    padding: 10vh 0px 0px 0px;
    box-sizing: border-box;
  }

  .swiper>>>.mosowe-swiper {
    height: 200rpx !important;
  }

  /* .swiper>>>.item{
    height: 50rpx !important;
  } */
  .swiper>>>.uni-swiper-slide-frame {
    height: 50rpx !important;
  }
</style>